/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    ScrollView,
    Image,
    View
} from 'react-native';

var ws = require('Dimensions').get('window').width;
var jsonObject = require('../data/test.json');

export default class ScrollViewDemo extends Component {
    constructor() {
        super();
        this.state = {currentPage: 0};
    }

    //ES5
    // getInitialState() {
    //     return (
    //         currentPage :0
    //     );
    // }
    componentDidMount() {
        console.log('componentDidMount');
        this.startTimer();
    }

    startTimer() {
        this.timer = setInterval(() => {
                this.nextPage();
            }
            , 5000);
    }

    nextPage() {
        let allPage = jsonObject.data.length;
        console.log(allPage);
        let scrollView = this.refs.ScrollView;
        let nextIndex = 0;
        if (this.state.currentPage + 1 >= allPage) {
            nextIndex = 0;
        } else {
            nextIndex = this.state.currentPage + 1;
        }
        this.setState({
            currentPage: nextIndex
        });

        let offsetX = nextIndex * ws;
        scrollView.scrollTo({x: offsetX, y: 0, animated: true});
        // let x = s.nativeEvent.contentOffset.x;
        // let cur = x / ws;
        // this.setState({
        //     currentPage: cur
        // });
    }

    componentWillUnmount() {
        // 请注意Un"m"ount的m是小写
        console.log('componentWillUnmount  请注意Un"m"ount的m是小写');
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearInterval(this.timer);
    }


    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    ref={'ScrollView'}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    // onScrollBeginDrag={this.beginDrag()}
                    // onScrollEndDrag={this.endDrag()}
                    // onMomentumScrollEnd={(ScrollView) => {
                    //     this.scrollEnd(ScrollView)
                    // }}
                    onMomentumScrollEnd={(e) => {
                        this.scrollEnd(e)
                    }}
                    // onMomentumScrollEnd={this.scrollEnd}
                    style={styles.scrollView}>
                    {this.getItemView()}
                </ScrollView>
                <View style={styles.circleGroupView}>
                    {this.getCircle()}
                </View>
            </View>
        );
    }

    // beginDrag() {
    //     console.log('beginDrag');
    //     this.timer && clearInterval(this.timer);
    // }
    //
    // endDrag() {
    //     console.log('endDrag');
    //     this.startTimer();
    // }


    scrollEnd(s) {
        let x = s.nativeEvent.contentOffset.x;
        let cur = x / ws;
        this.setState({
            currentPage: cur
        });
        console.log(cur);
    }

    getCircle() {
        let arr = [];
        let lenght = jsonObject.data.length;
        for (let i = 0; i < lenght; i++) {
            let sty = {color: i == this.state.currentPage ? 'orange' : 'white'};
            // let  sty = i == this.state.currentPage ? {color: 'orange'} :{color:'white'};
            arr.push(
                <Text key={i} style={[styles.circle, sty]}>&bull;</Text>
            );
        }
        return arr;
    }

    getItemView() {
        let itemImage = [];
        let arr = jsonObject.data;
        for (let i = 0; i < arr.length; i++) {
            itemImage.push(
                <Image key={i} source={this.getItem()[i]} style={styles.image}/>
            )
        }
        return itemImage;
    }

    getItem() {
        var arr = [];
        arr[0] = require('../data/icon0.jpg');
        arr[1] = require('../data/icon1.jpg');
        arr[2] = require('../data/icon2.jpg');
        arr[3] = require('../data/icon3.jpg');
        arr[4] = require('../data/icon4.jpg');
        arr[5] = require('../data/icon5.jpg');
        arr[6] = require('../data/icon6.jpg');
        arr[7] = require('../data/icon7.jpg');
        arr[8] = require('../data/icon8.jpg');
        arr[9] = require('../data/icon9.jpg');
        arr[10] = require('../data/icon10.jpg');
        arr[11] = require('../data/icon11.jpg');
        arr[12] = require('../data/icon12.jpg');
        return arr;
    }

}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    scrollView: {
        width: ws,
        backgroundColor: 'gray'
    },
    image: {
        width: ws,
        height: 200,
    },
    circle: {
        fontSize: 45,
    },

    circleGroupView: {
        width: ws,
        height: 30,
        backgroundColor: '#33666366',//rgba(0,0,0,0.8)

        flexDirection: 'row',
        alignItems: 'center',

        position: 'absolute',
        bottom: 0,


    },
});
